<template>
	<view class="common-text-size common-width96">
		<view class="ml-2">
			<view class="add-item">
				<text>收件人</text>
				<view>
					<input type="text" placeholder="请输入收货人姓名" v-model="form.name" />
				</view>
			</view>
			<view class="add-item">
				<text>手机号码</text>
				<view>
					<input type="text" placeholder="请输入收货人手机号" v-model="form.phone" />
				</view>
			</view>
			<view class="add-item">
				<text>所在地区</text>
				<view>
					<pop :addressInfo="addressInfo" @getAddressValue="getAddressValue"></pop>
				</view>
			</view>
			<view class="add-item">
				<text>详细地址</text>
				<view>
					<input type="text" placeholder="请填写详细地址" v-model="form.details" />
				</view>
			</view>
			<view class="add-item">
			</view>
			<view class="small-common-text-size font-color mt-2 item-between">
				<view>
					<text>设置默认地址</text><br>
					<text>提醒：每次下单会默认推荐使用该地址</text>
				</view>
				<switch style="transform:scale(0.7)" @change="setDefault" :checked="form.defalut == 1" />
			</view>
			<view class="mt-2" v-if="form.id > 0">
				<text class="text-red ml-2" @click="deleteAdd">删除地址信息</text>
			</view>
		</view>
		<button type="warn" class="position-bottom common-width96 ml-2 circle-button mb-2" @click="onSave">保存</button>
	</view>
</template>

<script>
	import pop from '@/components/pop.vue'
	import {
		addressUtil
	} from '@/static/json/address.js'
	export default {
		components: {
			pop
		},
		data() {
			return {
				addressInfo: [],
				form: {
					name: "",
					phone: "",
					details: "",
					defalut: 0,
					province: "",
					city: "",
					area: "",
					id: 0,
				}
			}
		},
		methods: {
			deleteAdd() {
				let _this = this;
				uni.showModal({
					content: "确定删除嘛",
					title: "提示",
					success(response) {
						if (response.confirm) {
							_this.$http({
								url: `/address/info?id=${_this.form.id}`,
								method: "DELETE"
							}).then(res => {
								let data = res.data;
								uni.navigateBack();
							});
						}
					}
				})
			},
			getAddressValue(province, city, area) {
				this.form.province = province;
				this.form.city = city;
				this.form.area = area;
			},
			setDefault(e) {
				let value = e.target.value;
				if (value) {
					this.form.defalut = 1;
				} else {
					this.form.defalut = 0;
				}
			},
			onSave() {
				if (this.form.area == '' || this.form.name == '' || this.form.phone == '' || this.form.details == '') {
					uni.showToast({
						title: "不可以为空",
						icon: "none"
					})
					return false;
				}
				let _this = this;
				if (_this.form.id == 0) {
					this.$http({
						url: "/address/info",
						method: "POST",
						data: this.form
					}).then(response => {
						uni.showToast({
							title: "保存成功",
							complete() {
								uni.navigateBack()
							}
						});
					});
				} else {
					_this.$http({url: "/address/info", method: "PUT", data: _this.form}).then(response => {
						uni.showToast({
							title: "修改成功",
							complete() {
								uni.navigateBack()
							}
						});
					})
				}
			},
		},
		onLoad(e) {
			this.addressInfo = addressUtil();
			if (e.form != null) {
				this.form = JSON.parse(e.form);
			}
		}
	}
</script>

<style>
	@import url("/static/css/common.css");

	.add-item {
		display: flex;
		justify-content: space-between;
		height: calc(8vh);
		line-height: calc(8vh);
		border-bottom: #999999 1px solid;
	}

	.add-item input {
		height: calc(10vh);
		width: calc(70vw);
		line-height: calc(10vh);
	}
</style>
